<template>
	<view class="main">
		<u-sticky>
			<qualificationAddStep :step="0" />
		</u-sticky>
		<view class="content">
			<view class="title">请选择商户类型</view>
			<view class="list u-flex-row">
				<view class="item" v-for="(item, index) of merchantTypeList" :key="index"
					@click="typeClick(index, item.id)"
					:class="merchantTypeSelectedIndex == index ? 'item-selected' : 'item-unselect'">{{item.name}}</view>
			</view>

			<view class="title title-level-2">您需要绑定的储蓄卡账户类型是哪种</view>
			<view class="list u-flex-row">
				<view class="item" v-for="(item, index) of accountTypeList" :key="index"
					@click="debitCardTypeClick(index, item.id)"
					:class="accountTypeSelectedIndex == index ? 'item-selected' : 'item-unselect'">{{item.name}}</view>
			</view>
		</view>

		<view class="u-m-t-93">
			<u-button type="primary" text="下一步" :customStyle="nextStepBtnCustomStyle"
				@click="warmReminderShow=true"></u-button>
		</view>

		<u-popup :show="warmReminderShow" mode="center" :customStyle="{width: '680rpx', backgroundColor:'#fff'}"
			round="20rpx" :closeable="true" :closeOnClickOverlay="true" @close="warmReminderClose">
			<view class="header u-flex u-row-start">
				<view class="header-title">温馨提醒</view>
				<u--image class="header-icon" :showLoading="true"
					:src="`${baseStaticFileUrl}/image/pages-qualification/warm-reminder.png`" width="194rpx"
					height="150rpx" />
			</view>
			<view class="header-content">
				<view class="content-t">请准备以下资料信息</view>

				<view class="content-item" v-for="(item, index) of warmReminderList" :key="index"
					v-if="index!=1 || merchantTypeSelectedIndex!=0">
					<view class="content-item-t u-flex-row">
						<u-icon :name="item.icon" :color="item.color" size="22"></u-icon>
						<view class="u-m-l-6">{{item.title}}</view>
					</view>

					<view class="content-item-desc">{{item.desc}}
						<text
							v-if=" merchantTypeSelectedIndex==2 && accountTypeSelectedIndex==1">{{item.openingPermit}}</text>
					</view>
				</view>

				<view class="bottom-check">
					<u-radio-group v-model="consent" @change="consentChange">
						<u-radio activeColor="#6072FF" shape="circle" label=" " name="ok" />
						<view @click="consentClick()">
							<text>阅读并同意</text>
							<text class="agreement-extrude"
								@tap.stop="cat('/pages-agreement-or-policy/protocolOfUsage')">《用户使用协议》</text>
							<text>与</text>
							<text class="agreement-extrude"
								@tap.stop="cat('/pages-agreement-or-policy/privacyPolicy')">《隐私政策》</text>
						</view>
					</u-radio-group>
				</view>

			</view>

			<u-button type="primary" text="我已准备好" :customStyle="warmReminderBtnCustomStyle" @click="nav()"></u-button>
		</u-popup>
	</view>
</template>

<script>
	import merchantDetail from '@/common/po/merchant-detail.ts'
	import qualificationAddStep from '@/components/qualification-add-step/qualification-add-step';
	export default {
		components: {
			qualificationAddStep
		},
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				merchantTypeList: [],
				accountTypeList: [],

				merchantTypeSelectedIndex: 0,
				accountTypeSelectedIndex: 0,
				nextStepBtnCustomStyle: {
					width: '690rpx',
					height: '88rpx',
					borderRadius: '120px',
					color: '#fff',
					margin: '14rpx auto 74rpx',
				},

				warmReminderShow: false,

				warmReminderList: [{
						icon: 'file-text',
						color: '#40CF88',
						title: '基础信息',
						desc: '法人身份证、法人银行卡、银行卡开户地区',
					},
					{
						icon: 'list-dot',
						color: '#FF9B00',
						title: '经营信息',
						desc: '营业执照',
						openingPermit: '、开户许可证'
					},
					{
						icon: 'map',
						color: '#6072FF',
						title: '场地信息',
						desc: '门头、内景、收银台、经营详细地址',
					},
				],

				warmReminderBtnCustomStyle: {
					width: '376rpx',
					height: '88rpx',
					borderRadius: '120px',
					color: '#fff',
					marginBottom: '50rpx',
				},
				toUrl: '/pages-qualification/add/base-info',
				merchantDetail: merchantDetail,
				consent: '',
				consentBool: false,
			};
		},
		onShow() {},
		onLoad(options) {
			this.merchantTypeList.length = 0;
			this.merchantTypeList.push(this.$merchantTypeEnum.PERSON)
			this.merchantTypeList.push(this.$merchantTypeEnum.INDIVIDUAL_HOUSEHOLD)
			this.merchantTypeList.push(this.$merchantTypeEnum.LIMITED_COMPANY)
			this.accountTypeList = this.merchantTypeList[0].accountTypeList;
			this.merchantDetail.merchantType = this.merchantTypeList[0].id;
			this.merchantDetail.accountType = this.accountTypeList[0].id;
			if (options.merchant) {
				let merchantData = JSON.parse(decodeURIComponent(options.merchant))
				//console.log(merchantData.status,"进入拉吗",merchantData.merchantId);
				if(merchantData.status == 2 && merchantData.canalMerchantId){
					// merchantData.merchantType = "03"
					// merchantData.accountType = "02"
					for (let item of this.merchantTypeList) {
						console.log(item.id,"id")
						if(item.id == merchantData.merchantType){
							this.merchantTypeList = []
							this.merchantTypeList.push(item)
							this.accountTypeList = []
							for (let subItem of item.accountTypeList) {
								if(subItem.id == merchantData.accountType){
									this.accountTypeList.push(subItem)
								}
							}
							this.merchantTypeSelectedIndex = 0
							this.accountTypeSelectedIndex = 0
							break;
						}
					}
					// console.log("merchantTypeList",this.merchantTypeList)
					// console.log("merchantType",merchantData.merchantType)
					// console.log("sss",this.$merchantTypeEnum.PERSON)
					// console.log("merchantTypeList",this.merchantTypeList)
				}
				// 编辑商户信息，重新提交
				this.initData(JSON.parse(decodeURIComponent(options.merchant)));
			} else {
				this.getUncommittedMerchantInfo();
			}
			uni.$on('updateMerchantInfo-baseInfo', this.onBaseInfo)
		},
		onUnload() {
			this.updateUncommittedMerchantInfo(false, this.merchantDetail)
		},
		methods: {
			consentChange(e) {
				if (this.consentBool) {
					this.consent = '';
					this.consentBool = false
				} else {
					this.consent = e
					this.consentBool = true
				}
			},

			consentClick() {
				if (this.$u.test.isEmpty(this.consent)) {
					this.consent = 'ok'
					this.consentBool = true
				} else {
					this.consent = '';
					this.consentBool = false
				}
			},

			onBaseInfo(e) {
				this.updateUncommittedMerchantInfo(false, e.data)
				this.initData(e.data);
			},

			// 读出缓存就初始上一次的选择
			initData(item) {
				try {
					this.merchantDetail = item;
					console.log("this.merchantDetail", this.merchantDetail)
					if (!this.$u.test.isEmpty(item.merchantType)) {
						for (let i = 0; i < this.merchantTypeList.length; i++) {
							if (item.merchantType == this.merchantTypeList[i].id) {
								this.merchantTypeSelectedIndex = i;
								// console.log("this.merchan",this.merchantTypeSelectedIndex);
								this.accountTypeList = this.merchantTypeList[i].accountTypeList;
								break;
							}
						}
					} else {
						this.merchantDetail.merchantType = "01";
					}
					if (!this.$u.test.isEmpty(item.accountType)) {
						for (let i = 0; i < this.accountTypeList.length; i++) {
							console.log(item.accountType + "-" + this.accountTypeList[i].id)
							if (item.accountType == this.accountTypeList[i].id) {
								this.accountTypeSelectedIndex = i;
								// console.log("this.accountTypeSelectedIndex",this.accountTypeSelectedIndex);
								break;
							}
						}
					} else {
						this.merchantDetail.accountType = "01";
					}
				} catch (e) {
					getApp().err("获取失败：" + e)
				}

			},

			warmReminderClose() {
				this.warmReminderShow = false;
			},

			// 获取上一次选择的记录
			getUncommittedMerchantInfo() {
				this.$api('merchant.getUncommittedMerchantInfo', null).then(res => {
					if (res.status == 0) {
						if (!this.$u.test.isEmpty(res.data)) {
							this.initData(res.data);
						}
					}
				}).catch((e) => {
					getApp().err("获取记录失败：" + e)
					uni.hideLoading();
				})
			},
			// 更新记录
			updateUncommittedMerchantInfo(isNav, data) {
				var that = this;
				this.$api('merchant.updateUncommittedMerchantInfo', data).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						if (isNav) {
							uni.hideLoading();
							uni.navigateTo({
								url: that.toUrl,
								fail: function(res) {
									getApp().err("跳转下一步失败:" + res.errMsg)
								}
							})
						}
					} else {
						getApp().err("信息提交不成功：" + res.msg)
					}
				}).catch((e) => {
					getApp().err("信息提交不成功：" + e)
					uni.hideLoading();
				})
			},

			cat(u) {
				uni.navigateTo({
					url: u,
					success: function(res) {}
				})
			},

			nav() {
				if (!this.consentBool) {
					this.$helpers.toast('请阅读并同意《用户使用协议》、《隐私政策》');
					return
				}

				this.warmReminderShow = false

				if (this.$u.test.isEmpty(this.merchantDetail.merchantType)) {
					this.$helpers.toast('获取进件类型不成功，请重新选择');
					return
				}
				if (this.$u.test.isEmpty(this.merchantDetail.accountType)) {
					this.$helpers.toast('获取账户类型不成功，请重新选择');
					return
				}
				uni.showLoading();
				this.updateUncommittedMerchantInfo(true, this.merchantDetail)
			},

			typeClick(index, id) {
				//编辑商户，重新提交的时候 选择商户按钮 终止掉
				if(this.merchantTypeList.length == 1){
					return
				}
				console.log(index, id)
				this.merchantTypeSelectedIndex = index;
				this.merchantDetail.merchantType = id;
				this.accountTypeSelectedIndex = 0;
				this.accountTypeList = this.merchantTypeList[index].accountTypeList;
				this.merchantDetail.accountType = this.accountTypeList[0].id;
			},

			debitCardTypeClick(index, id) {
				this.accountTypeSelectedIndex = index;
				this.merchantDetail.accountType = id;
			}
		}
	}
</script>

<style lang="scss">
	.main {
		box-sizing: border-box;

		.header {
			width: 100%;
			height: 170rpx;
			background: linear-gradient(rgba(215, 229, 247, 1) 0%, rgba(251, 253, 255, 0) 100%);
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;

			.header-title {
				margin-left: 138rpx;
				font-size: $f-xl;
				margin-right: 82rpx;
			}
		}

		.header-content {
			padding: 0 30rpx 40rpx;

			.content-t {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				margin-bottom: 22rpx;
			}

			.content-item {
				font-size: $f-base;
				margin-bottom: 36rpx;

				.content-item-t {
					color: rgba(0, 0, 0, 0.8);
				}

				.content-item-desc {
					margin-left: 50rpx;
					color: rgb(0, 0, 0);
				}
			}

			.bottom-check {
				margin-top: 80rpx;
				display: flex;
				font-size: $f-base;
				color: #000;

				.agreement-extrude {
					color: $u-primary;
				}
			}

		}

		.content {
			padding: 30rpx 30rpx;
			background-color: $uni-bg-color;

			.title {
				font-size: $f-lg;
				color: rgba(0, 0, 0, 0.9);
				margin-bottom: 20rpx;
			}

			.title-level-2 {
				margin-top: 74rpx;
			}

			.list {

				.item {
					padding: 15rpx 30rpx;
					font-size: $f-sm;
					border-radius: 6rpx;
					margin-right: 24rpx;
					position: relative;
				}

				.item-selected {
					border: 1rpx solid $u-primary;
					color: $u-primary;
				}

				.item-unselect {
					border: 1px solid rgb(224, 224, 224);
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
</style>
